<template>
	<view class="container">
		<image class="logo" src="../../static/images/simnectz_logo.png"></image>
		
		<view class="choose_customer">
			<view>
				选择客户：
			</view>
			<view>
				<image src="../../static/icon/kehu.png"></image>
			</view>			
			<view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view>{{array[index]}}</view>
				</picker>
			</view>
		</view>		
		
		<button type="primary" @click="openPwdModal">密码登录</button>
		<button type="primary" @click="loginByFingerPrint" v-if="enableFingerPrint">指纹登录</button>
		<button type="default" @click="openHostModal">设置连接</button>
		
		<uni-popup ref="popup" type="center">
			<view class="pwd_box">
				<input type="number" password="true" class="pwd_input" placeholder="请输入登录密码" v-model="loginPwd">
				<button type="default" @click="loginByPwd">进入电子钱包</button>
			</view>
		</uni-popup>
		
		<uni-popup ref="host" type="center">
			<view class="pwd_box">
				<input type="url" placeholder="请设置连接服务器地址" v-model="ip">
				<button type="default" @click="setHost">设置</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Global from '../../common/global.js'
	import uniPop from '../../components/uni-popup/uni-popup.vue'
	
	export default {
		data() {
			return {
				array: [],
				index: 0,
				loginPwd:'',
				enableFingerPrint:true,
				ip:Global.BASE_URL
			}
		},
		onLoad() {				
			//初始化客户列表
			this.getCustomerList()
			//读取是否开启指纹验证
			this.enableFingerPrint = uni.getStorageSync('enableFingerPrint')
		},
		methods: {
			//获得客户列表
			getCustomerList() {
				uni.request({
					url: Global.BASE_URL + '/ewallet/queryAllCustomer',
					header:{
						
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数						
						this.array = res.data.map((item)=>{
							return item.customerNumber
						});											
						console.log(res.data)						
					},
					fail(err) {
						uni.showToast({
							title:'查询客户列表接口调用失败',
							icon:'none'
						})
					}
				})	
			},			
			// 选择框事件
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.target.value)
			    this.index = e.target.value
			},
			//打开输入密码模态层
			openPwdModal(){
				this.$refs.popup.open()
			},
			//密码进入主画面
			loginByPwd(){
				
				uni.request({
					url: Global.BASE_URL + '/ewallet/checkLoginPwd',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						customerNumber:this.array[this.index],
						loginPwd:this.loginPwd
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数	
					 						
						if (res.data == true) {
							//存储选择的当前用户编号
							uni.setStorageSync("customerNumber",this.array[this.index])
																	
							//跳转到主画面
							uni.switchTab({
								url:'../home/home'
							})
						} else {							
							uni.showToast({
								title:'密码输入错误',
								icon:'none'
							})
						}
						
						this.$refs.popup.close()
						this.loginPwd = ''												
					},
					fail(err) {
						uni.showToast({
							title:'验证登录密码接口调用失败',
							icon:'none'
						})
					}
				})
			},
			//打开设计连接模态层
			openHostModal(){
				this.$refs.host.open()
			},
			//设置连接服务器
			setHost(){
				Global.BASE_URL = this.ip;
				console.log(Global.BASE_URL)
				this.$refs.host.close()
				//重新初始化客户列表
				this.getCustomerList()
			},
			// 启动指纹验证
			loginByFingerPrint(){
				uni.startSoterAuthentication({
				    requestAuthModes: ['fingerPrint'],
				    challenge: '123456',
				    authContent: '请用指纹解锁',
				    success:(res)=> {
				        if (res.errCode == 0) {
							//存储选择的当前用户编号
							uni.setStorageSync("customerNumber",this.array[this.index])
											
							//跳转到主画面
							uni.switchTab({
								url:'../home/home'
							})
						}												
				    },
				    fail:(err)=>{
				        console.log(err);
						
						if (err.errCode == 90010) {
							uni.showToast({
								title:'验证次数过多，指纹登录被暂时冻结，请稍后再试',
								icon:'none'
							})
						}
				    }
				})
				
			}
		}
	}
</script>

<style>		
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {		
		width: 600rpx;
		height: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.choose_customer {
		font-size: 40rpx;
		display: flex;
		justify-content:space-around;
		margin-top: 100rpx;
		margin-bottom: 20rpx;
	}
	
	.choose_customer view {
		padding-right: 10rpx;
	}
	
	.choose_customer image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.choose_customer picker {		
		font-weight: bold;
	}
	
	button {
		width: 500rpx;	
		border-radius: 0!important;
		margin-top: 20rpx;
	}
		
	.pwd_box {				
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 30rpx;
	}
	
	.pwd_input {
		padding: 0 15rpx;
		font-size: 40rpx;
		height: 100rpx;	
	}
	
	.pwd_box button {
		background-color: #FFFFFF;
	}
</style>